<template>
    <div class="home_container">
      <p class="logo_box"><i class="iconfont wandaguangchang"></i></p>
      <div class="weather_box">
        <div id="he-plugin-simple"></div>
      </div>
      <div class="interactive">
        <router-link class="interactive_btn" to="/interaction"><i class="iconfont robot"></i></router-link>
        <p>智能互动</p>
      </div>

      <div class="catering">
        <router-link class="catering_btn" to="/catering"><i class="iconfont canyin"></i></router-link>
        <p>餐饮美食</p>
      </div>

      <div class="brandsearch">
        <router-link class="brandsearch_btn" to="/brandpage"><i class="iconfont pinpai"></i></router-link>
        <p>品牌搜索</p>
      </div>

      <div class="mallmap">
        <router-link class="mallmap_btn" to="/mallmap"><i class="iconfont daohang"></i></router-link>
        <p>商场导航</p>
      </div>

      <div class="parkinglot">
        <router-link class="parkinglot_btn" to="/parkinglot"><i class="iconfont tingchechang"></i></router-link>
        <p>停车收费</p>
      </div>

      <div class="member">
        <router-link class="member_btn" to="/member"><i class="iconfont huiyuan"></i></router-link>
        <p>会员说明</p>
      </div>

    </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {

    }
  },
  methods: {

  },
  created () {
    window.WIDGET = {
      CONFIG: {
        modules: '01234',
        background: '5',
        tmpColor: 'FFFFFF',
        tmpSize: '44',
        cityColor: 'FFFFFF',
        citySize: '40',
        aqiColor: 'FFFFFF',
        aqiSize: '40',
        weatherIconSize: '56',
        alertIconSize: '56',
        padding: '10px 10px 10px 10px',
        shadow: '0',
        language: 'auto',
        fixed: 'false',
        vertical: 'top',
        horizontal: 'left',
        key: 'c96c78edf3474b1585e0067b5b5b8626'
      }
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
    document.getElementsByTagName('head')[0].appendChild(script)
  }
}
</script>

<style lang="less" scoped>
.home_container{
  width:1080px;
  height:1920px;
  background:url('../assets/images/homebg.jpg') #280285 no-repeat 0 0;
  .logo_box{
    width: 390px;
    height: 86px;
    color: #fff;
    position: absolute;
    top: 860px;
    left: 50px;
    transform: translate(0%, 0%);

    & > .iconfont{
      font-size:6rem;
    }
  }

  .weather_box{
    width: 500px;
    height: 98px;
    position: absolute;
    top: 970px;
    left: 50px;
  }

  .interactive,.catering,.brandsearch,.mallmap,.parkinglot,.member{
    width: 200px;
    position: absolute;
    z-index: 100;
    p{
      width: 100%;
      height: 46px;
      line-height: 46px;
      text-align: center;
      color: #fff;
      font-size: 2rem;
      margin-top: 10px;
    }
  }
  .interactive_btn,.catering_btn,.brandsearch_btn,.mallmap_btn,.parkinglot_btn,.member_btn{
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100px;
      color:#fff;
      box-shadow: 5px 5px 24px rgba(26,4,85,.5);
      & > .iconfont{
        font-size: 5rem;
      }
  }

  .interactive{
    top: 254px;
    left: 140px;
    .interactive_btn{
      background-color: #EB4E5F;
      background-image:-o-linear-gradient(0deg,#EB4E5F,#EED77F);
      background-image:-moz-linear-gradient(0deg,#EB4E5F,#EED77F);
      background-image:-webkit-linear-gradient(0deg,#EB4E5F,#EED77F);
      background-image: linear-gradient(0deg,#EB4E5F,#EED77F);
    }
  }

  .catering{
    top: 360px;
    left: 520px;
    .catering_btn{
      background-color: #E72459;
      background-image:-o-linear-gradient(0deg,#E72459,#EA93F2);
      background-image:-moz-linear-gradient(0deg,#E72459,#EA93F2);
      background-image:-webkit-linear-gradient(0deg,#E72459,#EA93F2);
      background-image: linear-gradient(0deg,#E72459,#EA93F2);
    }
  }

  .brandsearch{
    top: 630px;
    left: 770px;
    .brandsearch_btn{
      background-color: #7500FF;
      background-image:-o-linear-gradient(0deg,#7500FF,#B639FE);
      background-image:-moz-linear-gradient(0deg,#7500FF,#B639FE);
      background-image:-webkit-linear-gradient(0deg,#7500FF,#B639FE);
      background-image: linear-gradient(0deg,#7500FF,#B639FE);
    }
  }

  .mallmap{
    top: 1050px;
    left: 770px;
    .mallmap_btn{
      background-color: #5000FF;
      background-image:-o-linear-gradient(0deg,#5000FF,#4196FD);
      background-image:-moz-linear-gradient(0deg,#5000FF,#4196FD);
      background-image:-webkit-linear-gradient(0deg,#5000FF,#4196FD);
      background-image: linear-gradient(0deg,#5000FF,#4196FD);
    }
  }

  .parkinglot{
    top: 1350px;
    left: 520px;
    .parkinglot_btn{
      background-color: #A543E4;
      background-image:-o-linear-gradient(0deg,#A543E4,#F4CA60);
      background-image:-moz-linear-gradient(0deg,#A543E4,#F4CA60);
      background-image:-webkit-linear-gradient(0deg,#A543E4,#F4CA60);
      background-image: linear-gradient(0deg,#A543E4,#F4CA60);
    }
  }

  .member{
    top: 1450px;
    left: 140px;
    .member_btn{
      background-color: #5048EB;
      background-image:-o-linear-gradient(0deg,#5048EB,#7EE89E);
      background-image:-moz-linear-gradient(0deg,#5048EB,#7EE89E);
      background-image:-webkit-linear-gradient(0deg,#5048EB,#7EE89E);
      background-image: linear-gradient(0deg,#5048EB,#7EE89E);
    }
  }

}
</style>
